<template>
<div>
<!--  分隔行   -->
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-light">
      <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>委托客户查询</div>
    </div></el-col>
  </el-row>
<!--  查询条件   -->
  <el-form :inline="true" :model="queryForm" style="text-align: left; margin: 0 10%">
    <el-form-item label="委托客户编码">
      <el-input v-model="queryForm.customerId" placeholder="委托客户编号" clearable></el-input>
    </el-form-item>
    <el-form-item label="委托客户姓名">
      <el-input v-model="queryForm.customerName" placeholder="委托客户姓名" clearable></el-input>
    </el-form-item>
    <el-form-item label="联系人">
      <el-input v-model="queryForm.contact" placeholder="联系人" clearable></el-input>
    </el-form-item>
    <!--    查询按钮-->
    <el-form-item>
      <el-button type="info" @click="getList" plain>查询</el-button>
      <el-button type="info" @click="add()" plain>新增</el-button>
      <el-button type="info" @click="resetForm()" plain>重置</el-button>
    </el-form-item>
  </el-form>
<!--  分隔行   -->
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-light">
      <div style="float: left; margin: 0 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-s-unfold"></i>数据列表</div>
    </div></el-col>
  </el-row>
  <!--  数据表格 样式块-->
  <div id="s" class="animate__animated animate__zoomIn animate__delay-0.5s" style="margin-top: 20px">
    <!--  数据表格   -->
    <el-table :data="tableData" style="width: 100%;" :border="true"
              :header-cell-style="{background:'#209e91', color:'#ffffff',textAlign:'center'}">
      <el-table-column
        type="index"
        label="序号"
        :index="indexAdd"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="customerId"
        label="委托客户编号"
        sortable
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="customerName"
        label="委托客户名称"
        sortable
        align="center"
        show-overflow-tooltip
        width="200">
      </el-table-column>
      <el-table-column
        prop="customerNameShort"
        label="委托客户简称"
        sortable
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="联系人"
        sortable
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="contactTel"
        label="联系电话"
        sortable
        align="center">
      </el-table-column>
      <el-table-column
        prop="fax"
        label="传真号码"
        sortable
        align="center">
      </el-table-column>
      <el-table-column
        prop="mail"
        label="邮箱地址"
        sortable
        align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="新增时间">
      </el-table-column>
      <el-table-column
        prop="modifyTime"
        align="center"
        label="修改时间">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="100">
        <template v-slot="scope" >
          <el-button @click="edit(scope.row)" type="text" size="small"  >编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="remove(scope.row)">
            <el-button v-if="scope.row.checked!='是'" slot="reference" type="text" size="small"  >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--  分割行  -->
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="margin: 20px"></div>
      </div></el-col>
    </el-row>
    <!--  分页   -->
    <el-pagination
      @size-change="getList"
      @current-change="getList"
      :current-page.sync="queryForm.pageNum"
      :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
      :page-size.sync="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--  分割行  -->
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="margin: 20px"></div>
      </div></el-col>
    </el-row>
  </div>
    <!--  新增/修改页面   -->
  <el-dialog :title="title" :visible.sync="show" width="30%" >
      <span>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px">
          <el-form-item label="委托客户编码" prop="customerId">
             <el-input v-model="form.customerId" ></el-input>
          </el-form-item>
          <el-form-item label="委托客户名称" prop="customerName">
             <el-input v-model="form.customerName"></el-input>
          </el-form-item>
          <el-form-item label="委托客户简称" prop="customerNameShort">
             <el-input v-model="form.customerNameShort"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
             <el-input v-model="form.contact"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="contactTel">
             <el-input v-model="form.contactTel"></el-input>
          </el-form-item>
          <el-form-item label="传真地址" prop="fax">
             <el-input v-model="form.fax"></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="mail">
             <el-input v-model="form.mail"></el-input>
          </el-form-item>
        </el-form>
      </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "Customer",
  data() {
    return {
      //查询对象
      queryForm: {
        //用户编号
        customerId: '',
        //委托用户名称
        customerName:'',
        //委托用户联系人
        contact:'',
        //起始页码
        pageNum: 1,
        //起始每页条数
        pageSize: 10
      },
      //表格数组
      tableData: [],
      //共多少条
      total: 0,
      //显示新增、修改
      show: false,
      //表单对象
      form: { },
      //标题
      title: '',
      //校验对象
      rules: {
        customerId: [{required: true, message: '请输入委托客户编号', trigger: 'blur'}],
        customerName: [{required: true, message: '请输入委托客户名称', trigger: 'blur'}],
        contactTel:[
          {
            message: '联系电话格式不正确',
            pattern:/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
          }
        ],
        mail: [
          {
            message: '邮箱地址未填写或格式不正确',
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
          }
          ],
        fax: [
          {
            message: '传真地址未填写或格式不正确，请输入正确的格式如：xxx-xxxxxxxx',
            pattern: /^(\d{3,4}-)?\d{7,8}$/,
          }
          ]
      }
    }
  },
  methods: {
    //序号自增
    indexAdd(index) {
      // 当前页码
      const page = this.queryForm.pageNum
      // 每页条数
      const pageSize = this.queryForm.pageSize
      // 其他页面序号
      return index + 1 + (page - 1) * pageSize
    },
    //重置查询内容
    resetForm() {
      this.queryForm.customerId=''
      this.queryForm.customerName=''
      this.queryForm.contact=''
    },
    //查询委托客户
    getList() {
      this.$axios({
        url: 'base/customer/getList',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //新增委托客户
    add() {
      //设置标题
      this.title = '新增'
      //显示对话框
      this.show = true
      //清空表单
      this.form = {}
      //清空校验结果
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate();
      })
    },
    //编辑委托客户
    edit(row) {
      this.title = '修改'
      //清空表单
      this.form = {}
      //给form对象赋值
      this.form = Object.assign({}, row);
      //显示对话框
      this.show = true
    },
    //删除委托客户
    remove(row) {
      this.$axios({
        url: 'base/customer/remove/' + row.id,
        method: 'post'
      }).then(res => {
        if (res.data.success) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.getList();
        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //提交信息
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          //校验通过
          if (this.title == '新增') {
            this.$refs['ruleForm'].validate((valid) => {
              if (valid) {
                //跳转新增
                this.$axios({
                  url: 'base/customer/add',
                  method: 'post',
                  data: this.form
                }).then(res => {
                  if (res.data.success) {
                    this.show = false;
                    this.getList()
                  } else {
                    this.$message.error(res.data.message);
                  }
                }).catch(err => {
                  this.$message.error(err.message);
                })
              }
            });
          } else {
            //跳转编辑
            this.$axios({
              url: 'base/customer/edit',
              method: 'post',
              data: this.form
            }).then(res => {
              if (res.data.success) {
                this.show = false;
                this.getList()
              } else {
                this.$message.error(res.data.message);
              }
            }).catch(err => {
              this.$message.error(err.message);
            })
          }
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    success(res){
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  computed: {
  },
}
</script>

<style scoped>
/*按钮移上效果*/
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
/*列表部分效果*/
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
</style>
